<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
        }

        render() {
            /*这段结构会被转换为React.createElement函数的调用形成虚拟DOM*/
            const VDOM = (<div>
                <div className="header">
                    <span>我是头部--左边</span>
                    <span>我是头部--右边</span>
                </div>
                <div className="content">我是身体</div>
                <div className="footer">我是脚部</div>
            </div>)
            console.log(VDOM)
            return VDOM
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
